<template>
	<view>
		<u-tabbar :value="value1" @change="changeItem" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
			activeColor="#2DBB55" inactiveColor="#7d7e80">
			<u-tabbar-item text="首页">
				<u-icon size="20" slot="active-icon" name="/static/tabbar/tabbar0s.png"></u-icon>
				<u-icon size="20" slot="inactive-icon" name="/static/tabbar/tabbar0.png"></u-icon>
			</u-tabbar-item>
			<view class="u-tabbar-item">
				<button open-type="share" class="myButton">
					<view class="myView">
						<u-icon name="/static/tabbar/tabbar1.png" size="20"></u-icon>
						<text>分享</text>
					</view>

				</button>
			</view>
			<!-- <u-tabbar-item text="分享">
				<button open-type="share" slot="inactive-icon"></button>
				<button open-type="share" slot="active-icon"></button>
			</u-tabbar-item> -->
			<u-tabbar-item text="我的">
				<u-icon size="20" slot="active-icon" name="/static/tabbar/tabbar2s.png"></u-icon>
				<u-icon size="20" slot="inactive-icon" name="/static/tabbar/tabbar2.png"></u-icon>
			</u-tabbar-item>
		</u-tabbar>
	</view>

</template>

<script>
	export default {
		props: {
			value: 0
		},
		data() {
			return {
				value1: 0
			};
		},
		mounted() {
			this.value1 = this.value
		},
		onShareAppMessage() {
			console.log("aasdsadsa")
			const promise = new Promise(resolve => {
				setTimeout(() => {
					resolve({
						title: '二手回收交流群'
					})
				}, 2000)
			})
			return {
				title: '二手回收交流群',
				path: 'pages/index/index',
				promise
			}
		},
		methods: {
			changeItem(name) {
				console.log(name)
				switch (name) {
					case 0:
						uni.switchTab({
							url: `/pages/index/index`
						})
						break;

					case 1:
						uni.switchTab({
							url: `/pages/my/my`
						})
						break;
					default:
						uni.navigateTo({
							url: `/pages/my/my`
						})
						break;
				}
			}
		}
	};
</script>
<style>
	.tabbar-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 5rpx 0;
		color: #999999;
		background-color: white;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.u-tabbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
	}

	.myButton {
		background-color: #ffffff;
	}

	.myButton::after {
		border: none;
	}

	.myView {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		margin-top: 2px;
		font-size: 12px;
		color: #606266;

	}
</style>